<template>
	<div class="body">
		<!-- <el-form :inline="true" :model="fForm" class="top">
			<el-form-item label="架构模版名称：">
				<el-input v-model="fForm.architectModelName" placeholder="模版名称" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :icon="Search" @click="toSearch">查询</el-button>
			</el-form-item>
		</el-form> -->

		<el-table :data="fList" class="table">
			<el-table-column prop="architectModelId" label="架构模版ID" width="120" />
			<el-table-column prop="architectModelName" label="架构模版名称" width="180" />
			<el-table-column prop="architectModelDescription" label="架构模版详情"> </el-table-column>
			<el-table-column fixed="right" label="操作" width="180">
				<template #default="scope">
					<el-button type="danger" @click="toDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { modelList, deleteModel } from '@/api/manager'

	const fList = ref([])

	// 获取模版数据
	const getModelList = async () => {
		const rData = (await modelList()).data
		if (rData.code == 200) {
			fList.value = rData.data
		}else(
      fList.value = []
    )
	}

	onMounted(() => {
		getModelList()
	})

	// 删除架构方法
	const toDelete = (row) => {
		ElMessageBox.confirm('是否删除该架构模版?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
			.then(async () => {
				const rData = (await deleteModel([row.architectModelId])).data
				if (rData.code == 200) {
					ElMessage.success('删除成功')
					getModelList()
				} else {
					ElMessage.error('删除失败，' + rData.msg)
				}
			})
			.catch(() => {
				ElMessage.info('取消删除')
			})
	}

	// const fForm = reactive({
	// 	architectModelName: ''
	// })
	// 查询方法
	// const toSearch = () => {
	// 	getUserList()
	// }
</script>

<style lang="scss" scoped>
	.body {
		height: 100%;
		width: 100%;
	}
	.top {
		margin: 10px 20px;
		:deep(.el-form-item__label) {
			font-size: 18px;
			font-weight: bold;
		}
		:deep(.el-form-item__content) {
			width: 150px;
			.el-button {
				width: 100px;
				font-size: 18px;
			}
		}
	}
	.table {
		height: 70%;
		width: 75%;
	}
</style>